<template>
  <div>
    <Header :types=3 />
    <div class="content">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in yinyuankang.banners" :key="index" @click="gozuxun(item)">
          <img :src="item.image" style="width: 100%;height:150px;object-fit: cover;border-radius:12px;" />
        </van-swipe-item>
      </van-swipe>
      <div class="bangdantitle">
        <div v-for="(item, index) in zhutitabs" :key="index" style="" class="bangdanitem" @click="gobangdantile(index)">
          <div class="avatar:bangdantitle==index">{{ item }}</div>
          <div v-if="bangdantitle == index" class="hengxian"></div>
        </div>
      </div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" style="margin-top: .5rem;">
        <van-cell v-for="(item, index) in yinyuankang.data" :key="index" v-if="bangdantitle == 0"
          style="background-color: #ffffff;border-radius:.75rem;margin-bottom:1.375rem;padding:0 .75rem;">
          <div v-if="item.type == 1">
            <div style="display: flex;align-items: center;padding: 1rem 0;">
              <img :src="item.data.face" alt="" style="width:2.5rem;height:2.5rem;border-radius:50%;">
              <div style="margin-left:.75rem;line-height:0">
                <div style="display:flex;align-items:center;line-height:0">
                  <div style="font-size:.75rem;color: #17181A;font-weight: bold;">{{ item.data.pet_name }}</div>
                  <img src="~/static/guangchang/userbadge.png" alt=""
                    style="width:2.575rem;height: .75rem;margin-left:.25rem;">
                </div>

                <div style="font-size: 11px;color: #AEB0B3;margin-top:.675rem">{{ item.data.time }}</div>
              </div>
              <!-- <div class="guanzhu">+&nbsp;关注</div> -->
            </div>
            <div class="truncate" style="margin-left:3rem" v-html="item.data.content"
              @click="handleContentClick($event, item.data.games)"></div>
            <!-- <div style="margin-top: .8125rem;" v-if="item.data.video">
              <iframe :src="item.data.video" width="100%" frameborder="0" allowfullscreen="true"
                style="border-radius: .9375rem;"></iframe>
            </div> -->
            <div class="image-gallery" v-if="item.data.img" style="margin-left:3rem">
              <img v-for="(img, idx) in item.data.img" :key="idx" :src="img" :alt="'Image ' + (idx + 1)"
                :style="getImageStyle(item.data.img.length)" :class="getImageClass(idx, item.data.length)"
                @click.stop="showImage(img)" />
            </div>
            <div
              style="display: flex;align-items: center;justify-content: center;margin-top: .8925rem;justify-content: space-between;">
              <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                <img src="~/static/zixun/basic1.png" alt="" style="width: 1.0625rem;height: 1rem;">
                <div style="color: #7B7D80;font-size: .625rem;">浏览</div>
              </div>
              <div style="display:flex;align-items: center;jsutify-content: center;">
                <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                  <img src="~/static/zixun/basic2.png" alt="" style="width: 1.0625rem;height: 1rem;">
                  <div style="color: #7B7D80;font-size: .625rem;">评论</div>
                </div>
                <div
                  style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;margin-left:.875rem;"
                  @click="godianzan(item.data.id)">
                  <img v-if="item.data.is_zan == 0" src="~/static/zixun/xzax1.png" alt=""
                    style="width: 1.0625rem;height: 1rem">
                  <img v-if="item.data.is_zan == 1" src="~/static/zixun/xzax.png" alt=""
                    style="width: 1.0625rem;height: 1rem">
                  <div style="color: #7B7D80;font-size: .625rem;">{{ item.zan }}点赞</div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="item.type == 0"
            style="background-color: #ffffff;border-radius:.75rem;margin:1.375rem 0;padding:0 0;"
            @click="goheisehzixun(item.data.id)">
            <div style="font-weight: bold;font-size: .9375rem;">{{ item.data.title }}</div>
            <div style="font-size: 11px;color: #AEB0B3;margin:.0 0 .75rem 0">{{ formattedTime(item.time) }}</div>
            <img :src="item.data.image" alt=""
              style="height: 9.5rem;border-radius: .5rem;width: 100%;object-fit: cover;"
              @click.stop="showImage(item.data.image)">
            <div
              style="display: flex;align-items: center;justify-content: center;margin-top: .8925rem;justify-content: space-between;">
              <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                <img src="~/static/zixun/basic1.png" alt="" style="width: 1.0625rem;height: 1rem;">
                <div style="color: #7B7D80;font-size: .625rem;">{{ item.data.look }}浏览</div>
              </div>
              <div style="display:flex;align-items: center;jsutify-content: center;">
                <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                  <img src="~/static/zixun/basic2.png" alt="" style="width: 1.0625rem;height: 1rem;">
                  <div style="color: #7B7D80;font-size: .625rem;">{{ item.data.pinglun }}评论</div>
                </div>
                <div
                  style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;margin-left:.875rem;"
                  @click.stop="gozixundianzan(item.data.id)">
                  <img v-if="item.data.is_zan == 0" src="~/static/zixun/xzax1.png" alt=""
                    style="width: 1.0625rem;height: 1rem">
                  <img v-if="item.data.is_zan == 1" src="~/static/zixun/xzax.png" alt=""
                    style="width: 1.0625rem;height: 1rem">
                  <div style="color: #7B7D80;font-size: .625rem;">{{ item.data.zan }}点赞</div>
                </div>
              </div>
            </div>
          </div>
        </van-cell>
        <van-cell v-for="(item, index) in heisehnpinglun.data" :key="index" v-if="bangdantitle == 1"
          style="background: #ffffff;border-radius:.75rem;margin:.75rem;padding:.75rem .9375rem;margin-bottom:.75rem;">
          <div style="display: flex;">
            <img :src="item.touxiang" alt="" style="width:2.5rem;height:2.5rem;border-radius:50%;">
            <div style="margin-left:.75rem">
              <div style="display:flex;align-items:center;">
                <div style="font-size:.75rem;color: #17181A;font-weight: bold;">{{ item.user_name }}</div>
                <img src="~/static/guangchang/userbadge.png" alt=""
                  style="width:2.575rem;height: .75rem;margin-left:.25rem;">
              </div>
              <div style="font-size: 11px;color: #AEB0B3;">{{ item.timetran }}</div>
              <van-rate v-model="item.point" :size="12" color="#FF7500FF" void-icon="star" void-color="#eee" />
            </div>
          </div>
          <div style="display:flex;align-items:center;">
            <div style="width:3.5rem;height:2.5rem;border-radius:50%;"></div>
            <div v-if="item.content" class="truncate">
              {{ item.content }}
            </div>
          </div>
          <div style="display:flex;align-items:center;margin-top:.5rem;justify-content:space-between;"  @click.stop="gozan(item.id, item)">
            <div></div>
            <div style="display:flex;align-items:center;font-size: .625rem;font-weight: 500;color: #7B7D80;">
              <div>{{ item.zan }}点赞</div>
              <img v-if="item.seacted" src="~/static/zixun/xzax1.png" alt="" style="width:1.5rem;height:1.5rem"
              >
              <img v-if="item.seacted == false" src="~/static/zixun/xzax.png" alt="" style="width:1.5rem;height:1.5rem"
               >
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <BottomTab />
  </div>
</template>

<script>
import BottomTab from '~/components/footer.vue';
import Header from '~/components/header.vue';
import md5 from 'js-md5';
export default {
  components: {
    Header,
    BottomTab
  },
  data() {
    return {
      yinyuankang: '',
      zhutitabs: ['热聊', '评论', '攻略', '论坛'],
      bangdantitle: '',
      value: '',
      telimages: ['https://img01.yzcdn.cn/vant/apple-1.jpg', 'https://img01.yzcdn.cn/vant/apple-2.jpg', 'https://img01.yzcdn.cn/vant/apple-3.jpg'],
      loading: false,
      finished: false,
      page: 1,
      page2: 1,
      heisehnpinglun: [],
      zhutitype: true,
      uid: '',
      gameid:''
    }
  },
  computed: {
  },
  async asyncData({ $axios }) {
  },
  mounted() {
    this.uid = this.getCookie('loginnew');
    this.xiangdexindex()
   
  },
  methods: {
    datazhuan(e){
           console.log(e)
    },
    gozuxun(e){
      if(e.gid==0){
        window.location.href = e.link;
      }else{
        this.$router.push({
        path: `/news/${e}.html`,
      });
      }
    },
    goheisehzixun(e) {
      this.$router.push({
        path: `/news/${e}.html`,
      });
    },
    showImage(e) {
      this.$showImageModal(e)
    },
    async xiangdexindex() {
      const params = {
        ct: 'gamenav',
        ac: 'index',
        sign: this.textToHash,
        t: this.t,
        uid: this.uid
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.gameid = response.data.games[0].gid
      response.data.data.forEach(item => {
        if (item.type == 1) {
          item.data.content = item.data.content.replace(/\[图片\]([^\s]*)/g, (match, p1) => {
            return `<img src="https://www.77.top/static/gametag.png" alt="icon" class="icon" style="width: 1.25rem;height: 1.25rem;" @click="getfils()"/> <span  class="dynamic-span"  style="color: #3D9399FF;font-weight: bold;" @click="getfils()">${p1}</span>`;
          });
        }
      });
      this.yinyuankang = response.data;
      this.hshpinglunlist()
    },
    async godianzan(e) {
      let t = Date.now()
      const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
      let textToHash = md5(sign);
      const params = {
        ct: 'dongtai',
        ac: 'zan',
        type: 0,
        id: e,
        sign: textToHash,
        t: t,
        uid: this.uid
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.page = 1
      this.xiangdexindex()
    },
    async gozixundianzan(e) {
      let t = Date.now()
      const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
      let textToHash = md5(sign);
      const params = {
        ct: 'news',
        ac: 'zan',
        id: e,
        type: 0,
        t: t,
        uid: this.uid,
        sign: textToHash
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.page = 1
      this.xiangdexindex()
    },
    formatContent(content) {
      return content.replace(/\*([^\s]*)/g, (match, p1) => {
        return `<img src="https://www.77.top/static/gametag.png" alt="icon" class="icon" style="width: 1.25rem;height: 1.25rem;" @click="getfils()"/> <span  class="dynamic-span"  style="color: #3D9399FF;font-weight: bold;" @click="getfils()">${p1}</span>`;
      });
    },
    getImageStyle(count) {
      let width, height;
      if (count === 1) {
        width = '270px';
        height = '152px';
      } else if (count === 2) {
        width = '230px';
        height = '83px';
      } else {
        width = '89px';
        height = '89px';
      }
      return { width, height };
    },
    getImageClass(index, count) {
      const rowIndex = Math.floor(index / 3);
      const colIndex = index % 3;
      if (count === 1) {
        return 'rounded';
      }
      let className = '';
      if (count === 2) {
        if (index === 1) {
          return 'rounded-top-right';
        }
      }
      if (count === 9) {
        if (rowIndex === 0) { // First row
          if (colIndex === 0) {
            className = 'rounded';
          } else if (colIndex === 2) {
            className = 'rounded-top-right';
          }
        } else if (rowIndex === 2) {
          if (colIndex === 0) {
            className = 'rounded-bottom-left';
          } else if (colIndex === 2) {
            className = 'rounded-bottom-right';
          }
        }
      } else if (count === 1) {
        className = 'rounded';
      } else {
        if (rowIndex === 0 && colIndex === 0) {
          className = 'rounded';
        } else if (rowIndex === 0 && colIndex === 2) {
          className = 'rounded-top-right';
        } else if (rowIndex === Math.floor((count - 1) / 3) && colIndex === 0) {
          className = 'rounded-bottom-left';
        } else if (rowIndex === Math.floor((count - 1) / 3) && colIndex === 2) {
          className = 'rounded-bottom-right';
        } else {
          className = colIndex === 0 ? 'rounded-left' : colIndex === 2 ? 'rounded-right' : '';
        }
      }

      return className;
    },
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return '';
    },
    async gozan(e, a) {
      let t = Date.now()
      const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
      let textToHash = md5(sign);
      const params = {
        ct: 'app2021',
        ac: 'pinglun_zan',
        id: e,
        t: t,
        uid: this.uid,
        sign: textToHash
      };
      const response = await this.$axios.get('', { params });
      a.seacted = !a.seacted
      this.hshpinglunlist()
    },
    async hshpinglunlist() {
      let t = Date.now()
      const sign = `${this.uid}${t}fsd213ewdsadqwe2121213edsad`;
      let textToHash = md5(sign);
      const params = {
        ct: 'app2021',
        ac: 'gameinfo_pllist',
        id: this.gameid,
        p: this.page2,
        t: t,
        uid: this.uid,
        sign: textToHash
      };
      const response = await this.$axios.get('', { params });
      response.data.data.forEach(item => {
        item.seacted = true
        if (item.is_zan == 1) {
          item.seacted = false
        }
      });
      if (this.page2 == 1) {
        this.heisehnpinglun = response.data;
      } else {
        this.heisehnpinglun.data = this.heisehnpinglun.data.concat(response.data.data);
      }
      this.loading = false;
    },
    onLoad() {
      setTimeout(() => {
        if (this.bangdantitle == 0) {
          if (this.page <= this.yinyuankang.max_p) {
            this.page++;
            this.zhutilist();
          } else {
            this.finished = true;
          }
        } else if (this.bangdantitle == 1) {
          if (this.page2 <= this.heisehnpinglun.max_p) {
            this.page2++;
            this.hshpinglunlist();
          } else {
            this.finished = true;
          }
        }

      }, 500);
    },
    formattedTime(e) {  
  const totalSeconds = Math.floor(e / 1000);
  const days = Math.floor(totalSeconds / 86400);
  const hours = Math.floor((totalSeconds % 86400) / 3600);  
  const minutes = Math.floor((totalSeconds % 3600) / 60);  
  const secs = totalSeconds % 60; // 剩余的秒数  
  const formattedDays = String(days).padStart(2, '0');  
  const formattedHours = String(hours).padStart(2, '0');  
  const formattedMinutes = String(minutes).padStart(2, '0');  
  const formattedSeconds = String(secs).padStart(2, '0');  
  
  return `${formattedDays}天 ${formattedHours}小时 ${formattedMinutes}分钟 ${formattedSeconds}秒`;  
},
    gobangdantile(index) {
      this.bangdantitle = index;
      if (this.bangdantitle == 2) {
        if (this.uid) {
          this.$nuxt.$router.push({
            path: '/gameDetails/gameDetailsIndex',
            query: { id: this.yinyuankang.shequ_id,typs:1 }
          });
        } else {
          window.location.href = `${this.$domain}/?ct=wap&ac=login`;
        }
      }
      if (this.bangdantitle == 3) {
        if (this.uid) {
          this.$nuxt.$router.push({
            path: '/gameDetails/gameDetailsIndex',
            query: {
              id:this.yinyuankang.games.shequ_id,
            }
          });
        } else {
          window.location.href = `${this.$domain}/?ct=wap&ac=login`;
        }
      }

    },
    async zhutilist() {
      const params = {
        ct: 'gamenav',
        ac: 'index',
        p: this.page
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.gameid = response.data.games[0].gid;
      this.yinyuankang.data = this.yinyuankang.data.concat(response.data.data);
      this.loading = false;
    },
    handleContentClick(event, e) {
      const target = event.target;

      if (target.classList.contains('dynamic-span')) {
        const textContent = target.textContent;

        // 查找对应的 gid
        const item = e.find(item => item.name === textContent);
        if (item) {
          const gid = item.gid;
          this.getfils(gid);
        }
      }
    },
    getfils(gid) {
      this.$router.push({
        path: `/shouyou/${gid}.html`,
        query: { id: gid }
      });
    }
  }
}
</script>
 <style>
body {
  background: #F7F8FA !important;
  font-size: 16px;
  /* 默认字体大小 */
}</style>
<style scoped>

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: .5rem;
  gap: 2px;
  justify-content: left;
}

.image-gallery img {
  object-fit: cover;
  /* 保持图片比例 */
}

.rounded {
  border-radius: 8px;
}

.rounded-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rounded-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.rounded-top-left {
  border-top-left-radius: 8px;
}

.rounded-top-right {
  border-top-right-radius: 8px;
}

.rounded-bottom-left {
  border-bottom-left-radius: 8px;
}

.rounded-bottom-right {
  border-bottom-right-radius: 8px;
}

.rounded-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rounded-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.content {
  margin: .6875rem .75rem;
}

/deep/.van-swipe__indicators {
  position: absolute;
  bottom: .75rem;
  left: 90%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/deep/.van-swipe__indicator {
  width: .375rem;
  height: .375rem;
  background-color: #ffffff;
  border-radius: 100%;
  -webkit-transition: opacity .2s, background-color .2s;
  -webkit-transition: opacity .2s, background-color .2s;
  transition: opacity .2s, background-color .2s;
}

.bangdantitle {
  display: flex;
  align-items: center;
  margin: 0 .95rem;

}

.hengxian {
  width: 1.75rem;
  height: .125rem;
  background: #2E3033;
  border-radius: 1.5625rem;
}

.bangdanitem {
  margin-right: .5rem;
  display: flex;
  margin-top: .5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 2.6rem;
}

.avatar {
  font-weight: bold;
}

.xuanzhongdian {
  width: .375rem;
  height: .375rem;
  margin: 0 auto;
  background: #ff7500;
  box-shadow: .0625rem .0625rem .1875rem 0rem rgba(242, 120, 16, 0.32);
  border-radius: 50%;
  /* Simplify border-radius */
  position: absolute;
  left: 46%;
  bottom: -30%;
}

.active {
  font-weight: bold;
}

.guanzhu {
  width: 4.125rem;
  height: 1.625rem;
  border-radius: 4.25rem;
  border: 1px solid #2E3033;
  text-align: center;
  line-height: 1.625rem;
  font-weight: bold;
  margin-left: 4rem;
}

.truncate {
  color: #47494DFF;
  font-size: .9375rem;
  width: 100%;
  text-align: left;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 根据需要调整行高 */
}
</style>